<template>
  <div class="goods">
    <!-- 左边 -->
    <div class="Commodity">
      <ul>
        <li v-for="(item,index) in goods" :key="index" :data-id="index" :class="jumpid == index ? 'active' : ''" @click="jump(index)">{{item.name}}</li>
      </ul>
    </div>
    <!-- 右边 -->
    <div class="catalogue">
      <div class="catalogue_main">
        <ul v-for="(item,index) in goods" :key="index">
          <li class="list_head d_jump" :data-id="index">{{item.name}}</li>
          <li class="list_main" v-for="(item,i) in item.foods" :key="i">
            <!-- 商品详情 -->
            <div class="catalogue_details">
              <!-- 图片 -->
                <div class="catalogue_img">
                  <!-- 组件的路径必须使用相对路径 -->
                  <img :src="item.image" alt="">
                </div>
                <!-- 价格 -->
                <div class="foodDetails">
                  <h2>{{item.name}}</h2>
                  <p>{{item.description}}</p>
                  <div class="amount">
                    月收<span>{{item.sellCount}}</span>
                    份&nbsp;&nbsp;好评率
                    <span>{{item.rating}}</span>%
                  </div>
                  <p>
                    <span>￥{{item.price}}</span>
                    <span v-if="item.oldPrice!=''">￥{{item.oldPrice}}</span>
                  </p>
                </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [],
      scrollT: 0, //右侧分类的滚动距离
      jumpid: 0  //左侧的标识
    };
  },
  // dom结构挂载到页面中去
  mounted () {
    window.addEventListener('touchmove',this.menu)
  },
  created () {
    this.get_all_data();
    this.handelScroll();
  },
  watch : {
    scrollT : function (){
      this.handelScroll()
    }
  },
  methods: {
    // 获取数据
    get_all_data () {
      let _this = this;
      _this.$http.get("/goods")
        .then(function(res) {
          console.log(res)
          if (res.data.code == 0) {
            _this.goods = res.data.data;
            // 获取右侧数据时初始化滚动的距离
            _this.$nextTick(()=>{
              // 默认第第一个
              _this.jump(0)
            })
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    menu () {
      let catalogue = document.querySelector('.catalogue')
      // 元素滚动的距离
      this.scrollT = catalogue.scrollTop
    },
    // 获取所有d_jump的方法
    jump (index){
      let jump = document.querySelectorAll('.d_jump')
      let catalogue = document.querySelector('.catalogue')
      // 左侧点击的是第几项
      let total = jump[index].offsetTop
      catalogue.scrollTop = total
      // 将右侧的滚动距离存储起来
      this.scrollT = total
    },
    // 滚动事件
    handelScroll (){
      let jump = document.querySelectorAll('.d_jump')
      // let catalogue = document.querySelector('.catalogue')
      // 计算滚动的距离  超过每一个标签的极限值就改变左边的分类
      for (var i = 0; i < jump.length; i++) {
        if (this.scrollT >= jump[i].offsetTop) {
          this.jumpid = jump[i].getAttribute("data-id")
        }
      }
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../style/common.scss";
.goods {
  display: flex;
  position: absolute;
  top: 174px;
  bottom: 46px;
  width: 100%;
  overflow: hidden;
}
.Commodity {
  flex: 0 0 80px;
  height: 100%;
  background-color: #f1f5f7;
  overflow-y: scroll;
}
.Commodity ul li {
  height: 54px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  word-break: break-all;
  text-align: left;
  font-size: 12px;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
  padding: 0 8px;
}
.Commodity ul li.active{
  background-color: #fff;
  border: 0;

}
.Commodity ul li:last-child {
  border-bottom: 0;
}
.list_head {
  width: 100%;
  height: 26px;
  line-height: 26px;
  padding-left: 10px;
  text-align: left;
  background-color: #f3f5f7;
  border-left: 1px solid #d9dde1;
}
.catalogue {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  text-align: left;
}
.catalogue_details {
  display: flex;
  margin: 18px;
  margin-bottom: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}
.list_main:last-child .catalogue_details {
  border-bottom: 0;
}
.catalogue_img {
  flex: 0 0 57px;
}
.catalogue_img img {
  width: 70px;
  height: 70px;
  border-radius: 4px;
}
.foodDetails {
  margin-left: 10px;
}
.foodDetails h2 {
  margin-top: 2px;
  font-size: 14px;
  color: rgb(7, 17, 27);
  line-height: 14px;
}
.foodDetails p,
.foodDetails .amount {
  font-size: 10px;
  color: rgb(147, 153, 159);
  margin-top: 8px;
}
.foodDetails p {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.foodDetails p:last-child {
  font-size: 14px;
  color: #f01414;
  font-weight: 700;
  line-height: 24px;
}
.foodDetails p:last-child span:nth-child(2) {
  font-size: 10px;
  text-decoration: line-through;
  padding-left: 8px;
  color: rgb(147, 153, 159);
}
</style>
